<template>
  <div>
    <div id="overall">
        <div id="movie" @click="pictures()">     
        <img id="imagess" ref="imagess" src="">
        <form action="http://localhost:3000/articleContent/upload" id="sendImg" method="post" enctype="multipart/form-data" ref="sendImg">
        <input type="file" style="display: none;" name="pickHeader" id="pickHeader" ref="changes" multiple @change="showFlieInfo(this)">
        <input type="text" name="aId" id="aId" style="display: none;" ref="articleId" v-model="aId">
    </form>
        <div id="pict" ref="pict" style="text-align: center; line-height: 300px;" @mouseover="showText" @mouseout="showText1">
             
            <p style="height:200px;margin-left:100px"> <span style="position:relative;top:-50px;left:-6 0px"><svg t="1597737615073" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="33670" width="60" height="60"><path d="M330.583 715.653c-17.464 0-49.162-9.931-57.184-47.151l-0.337-1.563 0.011-209.366c-0.129-2.978-0.287-14.776 4.345-27.586 7.264-20.091 22.906-33.05 44.048-36.498l52.007-8.874 19.729-48.802 0.561-0.955c5.772-9.818 22.288-26.435 47.572-26.435 2.872 0 5.81 0.216 8.753 0.642l127.04-0.641c0.647-0.04 1.584-0.079 2.77-0.079 8.485 0 37.357 2.277 52.653 31.58l0.3 0.573 18.35 44.019 53.417 8.634c1.612 0.286 39.568 7.491 46.165 48.81l0.188 1.175v218.157c-0.067 15.688-10.29 47.092-48.497 54.108l-1.344 0.247H331.078c-0.128 0.003-0.293 0.005-0.495 0.005z m-27.52-52.034c5.282 20.826 23.578 22.021 27.453 22.034l0.329-0.019 0.07 0.015h367.389c9.547-2.021 15.997-6.581 19.694-13.915 2.732-5.419 2.973-10.458 2.973-10.505V445.62c-3.62-18.979-20.425-22.694-21.543-22.919l-69.494-11.229-24.252-58.18c-7.342-13.475-20.442-14.944-25.783-14.944-0.424 0-0.72 0.012-0.858 0.019l-0.765 0.091-0.498-0.034-130.007 0.656-1.261-0.21a31.71 31.71 0 0 0-5.174-0.444c-12.314 0-19.41 8.46-21.305 11.069l-25.015 61.88-68.684 11.719c-24.877 4.029-23.366 31.955-23.29 33.142l0.031 0.966-0.01 206.417z" fill="#BB2748" p-id="33671"></path><path d="M512.022 641.311c-60.357 0-109.461-49.102-109.461-109.456 0-60.351 49.104-109.45 109.461-109.45 60.339 0 109.428 49.099 109.428 109.45 0 60.354-49.089 109.456-109.428 109.456z m0-188.906c-43.815 0-79.461 35.641-79.461 79.45 0 43.813 35.646 79.456 79.461 79.456 43.797 0 79.428-35.644 79.428-79.456 0-43.809-35.631-79.45-79.428-79.45z" fill="#BB2748" p-id="33672"></path><path d="M512.013 93.174C280.69 93.174 93.182 280.695 93.182 512c0 231.307 187.508 418.826 418.831 418.826 231.315 0 418.806-187.52 418.806-418.826-0.001-231.305-187.491-418.826-418.806-418.826z m-0.001 819.795c-221.459 0-400.973-179.524-400.973-400.969 0-221.442 179.514-400.969 400.973-400.969 221.453 0 400.949 179.526 400.949 400.969 0 221.444-179.496 400.969-400.949 400.969z" fill="#BB2748" p-id="33673"></path></svg></span></p>
           <p v-if="show" style="position:relative;left:-10px;top:-185px;font-family:黑体;font-size:14px">添加题图</p>
            </div>
    </div>
    <div class="content_label" style="margin-top:20px">
        <el-tag
            :key="tag"
            v-for="tag in dynamicTags"
            @click="sentState(tag)"
            closable
            size="medium"
            :disable-transitions="false"
            @close="handleClose(tag)">
            {{tag}}
            </el-tag>
            <el-input
            class="input-new-tag"
            v-if="inputVisible"
            v-model="inputValue"
            ref="saveTagInput"
            size="medium"
            @keyup.enter.native="handleInputConfirm"
            @blur="handleInputConfirm"
            >
            </el-input>
            <el-button v-else class="button-new-tag" size="small" @click="showInput">+ New Tag</el-button>

    </div>
    <div class="writeTitle">
        <el-input style="height:50px"
            placeholder="请输入标题内容"
            v-model="input"
            clearable>
            </el-input>
    </div>
    <div class="introduce">
        <el-input
            type="textarea"
            placeholder="请输入内容简介"
            v-model="textarea"
            maxlength="30"
            show-word-limit
            >
            </el-input>
    </div>
    <div class="edits">
        <editor-bar v-model="detail" :isClear="isClear" @change="change"></editor-bar>
    </div>
   <!-- <button class="submits" @click="sendAll">发布</button> -->
   <el-button :plain="true" @click="sendAll" class="submits">发布</el-button>
   <button style="display:none" ref="sendImages" @click="doSendImg">图片上传</button>
</div>

</div>
</template>

<script>
import EditorBar from '../../components/WangEnduit.vue'   
export default {
  name: '',
  components:{
      EditorBar
  },
  data(){
    return {
        input: '',
        isClear: false,
        detail:"",
        show:false,
        uId:5,
        aId:10,
        dynamicTags: ['前端', '后端', '休闲'],
        inputVisible: false,
        inputValue: '',
        state:'',
        textarea: ''
    }
  },
  methods:{
      sentState(tag){
          this.state = tag
          console.log(this.state)
      },
       handleClose(tag) {
        this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
        },

      showInput() {
        this.inputVisible = true;
        this.$nextTick(_ => {
          this.$refs.saveTagInput.$refs.input.focus();
        });
        },

      handleInputConfirm() {
        let inputValue = this.inputValue;
        if (inputValue) {
          this.dynamicTags.push(inputValue);
        }
        this.inputVisible = false;
        this.inputValue = '';
        },
      showText(){
          this.show = true
      },
       showText1(){
          this.show = false
      },
      pictures(){
          this.$refs.changes.dispatchEvent(new MouseEvent('click'))
      },
      showFlieInfo(){
            var aImg = ''
            var that =this
            var fileReader = new FileReader()
            var reg = /^imag/gi
            fileReader.readAsDataURL(this.$refs.changes.files[0])
            var cal = reg.test(this.$refs.changes.files[0].type)
              if(cal){
                fileReader.onload = function(e){
                aImg = e.target.result
                document.querySelector('#imagess').src = e.target.result
            }            
            }else{
                alert("请你老实点")
            }
            this.$refs.pict.style.display="none"
            this.$refs.imagess.style.width="800px"
            this.$refs.imagess.style.height="250px"
      },
      change(val) {
        // console.log(val)
        // console.log(this.detail)
    },
    sendAll(){
        // this.$axios.get('http://localhost:3000/articleContent/writeArticle',{params:{id:this.uId,content:this.detail,title:this.input,state:this.state,detail:this.textarea}})
        // .then(res=>{
        //     this.$axios.get('http://localhost:3000/articleContent/searchArticle',{params:{uId:this.uId}})
        //     .then(res=>{
        //         this.aId = res.data.data[res.data.data.length-1].aId
        //         this.aId = res.data.data[res.data.data.length-1].aId
        //         this.$refs.sendImages.dispatchEvent(new MouseEvent('click'))
        //     })
        //     .catch(err=>{
        //         console.log("err",err)
        //     })
        // })
        // .catch(err=>{
        //     console.log("err",err)
        // })
        //    this.$message({
        //   message: '文章发布成功，快到主页面去跟小伙伴分享喜悦吧！',
        //   type: 'success'
        // });
        this.$refs.sendImg.submit()
    },
    doSendImg(){
        setTimeout(() => {
            this.$refs.sendImg.submit()
        }, 100);
        
    }
    
  },
  computed:{
  
  },
  created(){
      this.uId = this.$store.state.ownUid
  }
}
</script>
<style lang='scss' scoped>
/deep/[data-v-2f005f18] .el-input__inner{
    width: 1150px;
}
/deep/.el-textarea__inner{
    width: 1170px;
}
.introduce{
    margin-bottom: 20px;
}
  .el-tag + .el-tag {
    margin-left: 10px;
  }
  .button-new-tag {
    margin-left: 10px;
    height: 32px;
    line-height: 30px;
    padding-top: 0;
    padding-bottom: 0;
  }
  .input-new-tag {
    width: 90px;
    margin-left: 10px;
    vertical-align: bottom;
  }
.submits{
    width: 150px;
    height: 50px;
    border: none;
    position: relative;
    left:50%;
    margin-left: -75px;
    margin-top: 50px;
    margin-bottom: 50px;
}
#pict{
    width: 800px;
    height: 200px;
}
 *{margin:0;
    }
    /deep/.el-input__inner{
        height:50px
    }
    .writeTitle{
        width: 1200px;
        height: 50px;
        margin-top: 30px;
        background-color: yellow;
        margin-bottom: 50px;
    }
    ul{
        list-style: none;
    }
    .contexLi{
        float: left;
        width: 50px;
        padding-top: 10px;
        padding-bottom: 10px;
        border-top: 1px solid #ccc;
        border-bottom: 1px solid #ccc;
    }
*, *::before, *::after {
  box-sizing: inherit !important;
}
    #movie{
        width: 800px;
        height: 250px;
        background-color: rgb(246,246,246);
        position: relative;
        left: 0;
        right: 0;
        margin: 0 auto;
        padding-top: 25px;
    }
    #overall{
        width: 1200px;
        height: 200px;
        position: relative;
        left: 0;
        right: 0;
        margin:80px auto;
        // background-color: black;
    }
    .inputs{
        width: 800px;
        height: 60px;
        position: relative;
        padding-top: 20px;
        left: 0;
        height: 0;
        margin: 0 auto;
    }
    .content{
        border: none;
        width: 800px;
        height: 60px;
        font-size: 20px;
        font-weight: bold;
        vertical-align: middle;
    }
    .buttons{
        width: 800px;
        height: 50px;
    }
    #textareas{
        font-size: 25px;
        border: none;
    }
</style>
